<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/module/index/_taglib.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<title>JC mms</title>
		<jsp:include page="/_loadCssScript.jsp"></jsp:include>
		<script type="text/javascript">
			function BrowseServer(config, callback)
			{
				var finder = new CKFinder(config);
				finder.basePath = '/js/ckfinder/';	// The path for the installation of CKFinder (default = "/ckfinder/").
				finder.selectActionFunction = callback;
				finder.popup();
			}
		
			$(function(){
				
				// 判断必要的值是否已填写
				var hasNecessaryValue = function(){
					var inputs3 = $("form:first").find(":input[name='imageUri'], :input[name='audioUri'], :input[name='text']");
					var isAllNull = true;
					$.each(inputs3, function(index, item){
						if($.trim($(item).val()) != ''){
							isAllNull = false;
						}
					});
					return !isAllNull;
				};
				
				// 初始化按钮状态
				var frameSpan = $.trim($("#frameSpan").html());
				var currentFrame = parseInt(frameSpan.split("/")[0]);
				var totalFrame = parseInt(frameSpan.split("/")[1]);
				if(currentFrame < 2){
					$("#previousBtn").button("disable");
				}
				// 表单为空就禁止下一帧按钮
				if(!hasNecessaryValue()){
					//$("#nextBtn").button("disable");
				}
				
				// 图片、铃音、文字改变时的事件绑定
				$("form:first").find(":input[name='imageUri'], :input[name='audioUri'], :input[name='text']").change(function(){
					if(hasNecessaryValue()){
						//$("#nextBtn").button("enable");
					}else{
						//$("#nextBtn").button("disable");
					}
				});
				
				/* 浏览图片 */
				$("#browseImage").click(function(){
					// 弹出文件选择
					var config = {"resourceType":"Images" };
					BrowseServer(config, function(fileUrl){
						if(fileUrl != null){
							var imgObj = $("#contentDiv p").has("img");
							if(imgObj.length > 0){
								imgObj.remove();
							}
							var imgStr = "<p class='text_align_center'><img src='" + fileUrl + "'/></p>";
							$("#contentDiv").prepend(imgStr);
							$(":input[name='imageUri']").val(fileUrl);
						}
						return true;
					});
				});
				
				/* 浏览音频 */
				$("#browseAudio").click(function(){
					// 弹出文件选择
					var config = {"resourceType":"Audios" };
					BrowseServer(config, function(fileUrl){
						if(fileUrl != null){
							var imgObj = $("#contentDiv p").has("img");
							if(imgObj.length > 0){
								imgObj.remove();
							}
							var imgStr = "<p><img src='" + fileUrl + "'/></p>";
							$("#contentDiv").prepend(imgStr);
							$(":input[name='imageUri']").val(fileUrl);
						}
						return true;
					});
				});
				
				$(":input[name='text']").on("change keyup", function(){
					var text = this.value;
					if(text != null){
						text = text.replace(/[\r\n]/g, "<br/>"); // 替换回车换行为<br/>
						text = text.replace(/[ ]/g, "&nbsp;"); // 替换空格为&nbsp;
					}
					var textStr = "<p>" + text + "</p>";
					if($("#contentDiv p:not(:has(img))").length > 0){
						$("#contentDiv p:not(:has(img))").remove();
					}
					$("#contentDiv").append(textStr);
				});
				
				// 绑定按钮事件并检查数据
				$("#previousBtn, #nextBtn, #deleteBtn, #saveBtn").click(function(){
					// var inputs = $("form:first").find(":input:hidden, :input[type='text'], select, textarea");
					// alert(inputs.length);
					if(this.value != "delete"){
						if(!hasNecessaryValue()){
							alert("图片、铃音、文字中至少要填一项");
							return;
						}
					}
					$(":input[name='operate']").val(this.value);
					$("form:first").submit();
				});
				
			});
		</script>
	</head>
	<body>
		<jsp:include page="/module/index/_top_navbar.jsp"></jsp:include>
		
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span2">
					<jsp:include page="/module/index/_menu.jsp"></jsp:include>
				</div>
				<div class="span10">
					<!-- 站点路径 -->
					<ul class="breadcrumb">
						<li><a href="<%=request.getContextPath() %>/">首页</a> <span class="divider">/</span></li>
						<li><a href="<%=request.getContextPath() %>/module/mms/list.do">内容管理</a> <span class="divider">/</span></li>
						<li class="active">内容上传</li>
					</ul>
					
					<ul class="nav nav-tabs">
						<li><a href="javascript:void(0)">第一步：内容上传</a></li>
						<li class="active"><a href="javascript:void(0)">第二步：帧编辑</a></li>
					</ul>
					
					
					
					<form action="<%=request.getContextPath() %>/module/mms/add.do" method="post" class="form-horizontal">
						<fieldset>
							<legend>内容基本信息</legend>
							<div class="control-group">
								<label class="control-label" for="inputName">内容名称</label>
								<div class="controls">
									<input type="text" id="inputName" name="name" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputKeyWord">关键字</label>
								<div class="controls">
									<input type="text" id="inputKeyWord" name="keyWord" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputContentCategoryId">所属分类</label>
								<div class="controls">
									<input type="text" id="inputContentCategoryId" name="contentCategoryId" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputNumber">内容编号</label>
								<div class="controls">
									<input type="text" id="inputNumber" name="number" class="input-xlarge">
								</div>
							</div>
						</fieldset>
						<fieldset>
							<legend>内容详细信息</legend>
							<div class="control-group">
								<label class="control-label" for="inputMmsTopic">彩信主题</label>
								<div class="controls">
									<input type="text" id="inputMmsTopic" name="mmsTopic" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputMmsNumber">彩信编号</label>
								<div class="controls">
									<input type="text" id="inputMmsNumber" name="mmsNumber" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputCallbackUrl">回访URL地址</label>
								<div class="controls">
									<input type="text" id="inputCallbackUrl" name="callbackUrl" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputCallbackUrlFrame">URL地址所在帧</label>
								<div class="controls">
									<input type="text" id="inputCallbackUrlFrame" name="callbackUrlFrame" class="input-xlarge">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="inputSendDate">发送日期</label>
								<div class="controls">
									<input type="text" id="inputSendDate" name="sendDate" class="input-xlarge">
								</div>
							</div>
						</fieldset>
						<div class="form-actions">
							<button id="saveBtn" type="button" class="btn btn-primary">下一步&gt;</button>
						</div>
					</form>
				</div>
<!-- 
		<div id="tabs">
			<ul>
		        <li><a href="#tabs-1">第一步：内容上传</a></li>
		        <li><a href="#tabs-2">第二步：帧编辑</a></li>
		    </ul>
		    <div id="tabs-1">
		    </div>
		    <div id="tabs-2">
		    	重要提示：彩信大小不能超过75K，用户在上传图片和铃音时，请注意文件的大小。
		    	<div id="previewDiv">
		    		<div id="smsbgDiv"></div>
		    		<div id="phoneDiv"></div>
		    		<div id="contentDiv">
		    		</div>
		    	</div>
		    	<div>
					<form action="<%=request.getContextPath() %>/module/frame/operate.do" method="post">
						<input type="hidden" name="id" value="${frame.id }"/>
						<input type="hidden" name="mmsId" value="${mmsId }"/>
						<input type="hidden" name="operate"/>
						<fieldset>
							<legend>帧信息</legend>
							<table>
								<tr>
									<th class="ui-widget-header"><label>播放时间：</label></th>
									<td><select name="playTime">
										<option value="5" <c:if test="${frame.playTime == 5}">selected='selected'</c:if> >5</option>
										<option value="10" <c:if test="${frame.playTime == 10}">selected='selected'</c:if> >10</option>
										<option value="15" <c:if test="${frame.playTime == 15}">selected='selected'</c:if> >15</option>
										<option value="30" <c:if test="${frame.playTime == 30}">selected='selected'</c:if> >30</option>
										<option value="60" <c:if test="${frame.playTime == 60}">selected='selected'</c:if> >60</option>
										<option value="120" <c:if test="${frame.playTime == 120}">selected='selected'</c:if> >120</option>
										<option value="240" <c:if test="${frame.playTime == 240}">selected='selected'</c:if> >240</option>
										<option value="280" <c:if test="${frame.playTime == 280}">selected='selected'</c:if> >280</option>
										<option value="360" <c:if test="${frame.playTime == 360}">selected='selected'</c:if> >360</option>
									</select>秒</td>
								</tr>
								<tr>
									<th class="ui-widget-header"><label>图片：</label></th>
									<td>
										<input type="text" name="imageUri" value="${frame.imageUri }" readonly="readonly"/>
										<div><button type="button" id="browseImage">选择图片</button></div>
									</td>
								</tr>
								<tr>
									<th class="ui-widget-header"><label>铃音：</label></th>
									<td>
										<input type="text" name="audioUri" value="${frame.audioUri }" readonly="readonly"/>
										<div><button type="button" id="browseAudio">选择铃音</button></div>
									</td>
								</tr>
								<tr>
									<th class="ui-widget-header"><label>文字：</label></th>
									<td><textarea name="text" cols="50" rows="20">${frame.text }</textarea></td>
								</tr>
							</table>
						</fieldset>
						彩信帧数：
						<button id="previousBtn" value="previous" type="button">&lt; 上一帧</button>
						<span id="frameSpan">${currentFrame }/${totalFrame }</span>
						<button id="nextBtn" value="next" type="button">下一帧 &gt;</button>
						<button id="deleteBtn" value="delete" type="button">X 删除帧</button>
						<button id="saveBtn" value="save" type="button">√ 全部完成</button>
					</form>
		    	</div>
				<div class="clear_both"></div>
 -->
		    </div>
	    </div>
	</body>
</html>